<template>
	<div class="map-view">
		<div class="view-bg"></div>
		<div class="view-body">
			<div class="header">
				<img src="@/assets/mapView/top.png" />
			</div>
			<div class="view-box">
				<div class="view-box-left">
					<div class="view-box-left-top">
						<!-- 头部左 -->
						<div class="view-data-column">
							<!-- 覆盖单位数 -->
							<div class="view-data-item">
								<img src="@/assets/mapView/icon-1.png" class="data-icon" />
								<div class="data-text">
									<div class="data-name">覆盖单位数</div>
									<div class="data-value">
										<animate-number v-if="pagedata.firmCount || pagedata.firmCount === 0" :number="pagedata.firmCount" class="value"></animate-number>
										<span>条</span>
									</div>
								</div>
							</div>
							<!-- 检测总数 -->
							<div class="view-data-item">
								<img src="@/assets/mapView/data-icon3.png" class="data-icon" />
								<div class="data-text">
									<div class="data-name">检测总数</div>
									<div class="data-value">
										<animate-number v-if="pagedata.inspectCount || pagedata.inspectCount === 0" :number="pagedata.inspectCount" class="value"></animate-number>
										<span>条</span>
									</div>
								</div>
							</div>
						</div>
						<div class="view-data-column">
							<!-- 覆盖资产数 -->
							<div class="view-data-item">
								<img src="@/assets/mapView/icon-2.png" class="data-icon" />
								<div class="data-text">
									<div class="data-name">覆盖资产数</div>
									<div class="data-value">
										<animate-number v-if="pagedata.assetCount || pagedata.assetCount === 0" :number="pagedata.assetCount" class="value"></animate-number>
										<span>条</span>
									</div>
								</div>
							</div>

							<!-- 通报总数 -->
							<div class="view-data-item">
								<img src="@/assets/mapView/data-icon2.png" class="data-icon" />
								<div class="data-text">
									<div class="data-name">通报总数</div>
									<div class="data-value">
										<animate-number v-if="pagedata.reportCount || pagedata.reportCount === 0" :number="pagedata.reportCount" class="value"></animate-number>
										<span>条</span>
									</div>
								</div>
							</div>
						</div>
						<div class="view-data-column">
							<!-- 漏洞总数 -->
							<div class="view-data-item">
								<img src="@/assets/mapView/data-icon1.png" class="data-icon" />
								<div class="data-text">
									<div class="data-name">漏洞总数</div>
									<div class="data-value">
										<animate-number v-if="pagedata.bugCount || pagedata.bugCount === 0" :number="pagedata.bugCount" class="value"></animate-number>
										<span>条</span>
									</div>
								</div>
							</div>
							<!-- 风险总数 -->
							<div class="view-data-item">
								<img src="@/assets/mapView/data-icon4.png" class="data-icon" />
								<div class="data-text">
									<div class="data-name">风险总数</div>
									<div class="data-value">
										<animate-number v-if="pagedata.riskCount || pagedata.riskCount === 0" :number="pagedata.riskCount" class="value"></animate-number>
										<span>条</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="card" @mouseover="closeBugs">
						<div class="title">辖区覆盖统计</div>
						<div class="view-box-left-center">
							<div style="height: 50%" id="zican"></div>
							<div style="height: 50%">
								<div class="lab">
									<div style="border-left: 5px solid #34a8fe">系统层 {{ bugChartDatas[0].value }}</div>
									<div style="border-left: 5px solid #19dc7c">服务层 {{ bugChartDatas[1].value }}</div>
									<div style="border-left: 5px solid #8c70f8">应用层 {{ bugChartDatas[2].value }}</div>
									<div style="border-left: 5px solid #fa8f3d">支持层 {{ bugChartDatas[3].value }}</div>
									<div style="border-left: 5px solid #4e5fcc">硬件层 {{ bugChartDatas[4].value }}</div>
								</div>
								<div style="height: 100%" id="bugTu"></div>
							</div>
						</div>
					</div>
					<!-- top 10 -->
					<div class="card">
						<div class="title">Top 10</div>
						<div class="tabs">
							<div v-bind:class="{ active: isShowTop }" @click="isShowTop = true"><a href="javascript:void(0)">高危单位TOP</a></div>
							<div v-bind:class="{ active: !isShowTop }" @click="isShowTop = false"><a href="javascript:void(0)">最新漏洞</a></div>
						</div>
						<!-- top10列表 -->
						<div v-if="isShowTop" class="view-box-left-bottom">
							<div class="grid-body">
								<div class="grid-body-title">
									<div>NO</div>
									<div style="width: 50%">单位名称</div>
									<div>高危漏洞</div>
									<div>中危漏洞</div>
								</div>
								<div class="list" v-for="(item, index) in riskRank" :key="item" @mouseover="showBugs(item)">
									<div>{{ index + 1 }}</div>
									<div style="width: 50%">{{ item.name }}</div>
									<div>{{ item.highBugCount }}</div>
									<div>{{ item.mediumBugCount }}</div>
								</div>
							</div>
							<!-- 弹框列表 -->
							<div v-if="isShowRiskRankBugs" class="alt-list" @mouseleave="closeBugs">
								<div class="grid-body-title">
									<div style="width: 50%">漏洞名称</div>
									<div>漏洞等级</div>
									<div>漏洞类型</div>
								</div>
								<div class="grid-body">
									<div class="list" v-for="item in riskRankBugs" :key="item">
										<div style="width: 50%">{{ item.vulnName }}</div>
										<!-- <div style="width:70%" ><marquee behavior="scroll" direction="left" scrollamount="3">{{item.vulnName}}</marquee></div> -->
										<div>
											<span v-if="item.severity == 'Medium'">中危</span>
											<span v-else-if="item.severity == 'Low'">低危</span>
											<span v-else-if="item.severity == 'High'">高危</span>
										</div>
										<div>
											<span v-if="item.vulnType === 'Sys'">系统漏洞</span>
											<span v-else-if="item.vulnType === 'App'">应用漏洞</span>
											<span v-else>普通漏洞</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div v-if="!isShowTop" class="view-box-left-bottom">
							<div class="grid-body">
								<div class="grid-body-title">
									<div>漏洞名称</div>
									<div>企业名称</div>
									<div>企业地址</div>
								</div>
								<div class="list" v-for="item in pagedata.newVulnRowsTop10" :key="item">
									<div>{{ item.vulnName }}</div>
									<div>{{ item.firmName }}</div>
									<div>{{ item.firmAddress }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="view-box-center" @mouseover="closeBugs">
					<div class="view-box-center-bottom">
						<div class="card">
							<div class="title" style="width: 40%">检测中心</div>
							<div class="card-body">
								<div>
									<div class="b1">
										<span class="title-logo"><img src="@/assets/mapView/jianyan/1-1.png" /></span>
									</div>
									<div>数据采集中</div>
								</div>
								<div>
									<div class="title-two">数据采集</div>
									<div class="title-two-text">{{ pagedata.countData1 }}份已采集</div>
									<img src="@/assets/mapView/jianyan/to.png" />
								</div>
								<div>
									<div class="b2">
										<span class="title-logo"><img src="@/assets/mapView/jianyan/2-1.png" /></span>
									</div>
									<div>数据化验中</div>
								</div>
								<div>
									<div class="title-two">数据化验</div>
									<div class="title-two-text">{{ pagedata.countData2 }}份已化验</div>
									<img src="@/assets/mapView/jianyan/to.png" />
								</div>
								<div>
									<div class="b3">
										<span class="title-logo"><img src="@/assets/mapView/jianyan/3-1.png" /></span>
									</div>
									<div>报告生成中</div>
								</div>
								<div style="text-align: left">
									<div class="title-two">化验报告</div>
									<div>2份已生成</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div id='work' style="width:50%;height:100%;"></div>
                  <div id='fenbu' style="width:50%;height:100%;"></div> -->
				</div>
				<!-- 右 -->
				<div class="view-box-right">
					<div class="card" style="height: 18rem">
						<div class="title">通报消息</div>
						<div class="view-box-right-top">
							<div class="grid-body">
								<div class="grid-body-title">
									<div>时间</div>
									<div>辖区</div>
									<div>内容</div>
								</div>
								<div class="list" v-for="item in msgs" :key="item">
									<div>{{ item.createTime }}</div>
									<div style="color: rgb(223 173 21)">{{ item.psName }}</div>
									<div>{{ item.title }}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="card">
						<div class="title">通报单位TOP10</div>
						<div class="view-box-right-center">
							<div class="grid-body">
								<div class="grid-body">
									<div class="grid-body-title">
										<div style="width: 10%">NO</div>
										<div style="width: 30%">单位名称</div>
										<div style="width: 15%">通报次数</div>
										<!-- <div>最近通报状态</div> -->
										<div style="width: 40%">最近一次通报时间</div>
										<div>辖区</div>
									</div>
									<div class="list-body">
										<div class="list" v-for="(item, index) in pagedata.reportCountTop10" :key="item">
											<div style="width: 10%">{{ index + 1 }}</div>
											<div style="width: 30%">{{ item.name }}</div>
											<div style="width: 15%">{{ item.reportCount }}</div>
											<div style="width: 40%">
												<span v-if="item.lastReport.status == 'UnReported'">--</span>
												<span v-else-if="item.lastReport.status == 'Reported'">{{ item.lastReport.reportTime }}</span>
												<span v-else-if="item.lastReport.status == 'Handled'">{{ item.lastReport.disposeTime }}</span>
												<span v-else-if="item.lastReport.status == 'Uploaded'">{{ item.lastReport.uploadTime }}</span>
												<span v-else-if="item.lastReport.status == 'Confirmed'">{{ item.lastReport.confirmTime }}</span>
											</div>
											<div>{{ item.psName }}</div>
										</div>
									</div>
								</div>
							</div>
							<div class="tongbao-list" id="tongbao"></div>
						</div>
					</div>
					<div class="card">
						<div class="title">实时风险</div>
						<!-- <div class="view-box-right-bottom" id='fengXian'></div> -->
						<div class="view-box-right-bottom" ref="riskDom">
                            <div class="fengxian-box" ref="riskBox">
                                <transition-group tag="div" name="list">
                                    <div class="fengxian-body" v-for="item in pagedata.newRisks" :key="item.id" :ref="'riskItem'+item.id">
                                        <div class="up">
                                            <div>{{ item.riskName }}</div>
                                            <div style="text-align: center">
                                                <span class="age-Medium" v-if="item.severity == 'Medium'">中危</span>
                                                <span class="age-Low" v-else-if="item.severity == 'Low'">低危</span>
                                                <span class="age-High" v-else-if="item.severity == 'High'">高危</span>
                                            </div>
                                            <div>{{ item.createTime }}</div>
                                        </div>
                                        <div style="padding-left: 0.5rem">{{ item.firmName }}</div>
                                    </div>
                                </transition-group>
                            </div>
							
						</div>
					</div>
				</div>
			</div>
			<!-- 中間地球與地圖 -->
			<div class="earthmap-view">
				<div :class="{ show: !showMap, fadeOut: fadeEarth }" id="earthmap" @wheel.prevent="mousewheel" style="width: 100%; height: 100%"></div>
				<div :class="{ show: showMap, fadeOut: fadeMap, init: initMap }" id="amap" style="width: 100%; height: 100%"></div>
			</div>
		</div>

		<!-- 企业弹窗 -->
		<transition name="fade">
			<div class="company-detail-dialog" v-if="showDialog">
				<div class="dialog-close" @click="closeDialog">✖</div>
				<div class="title">
					基础信息
					
				</div>
				<div class="body">
					<div class="info-line">
						<div>
							<label>单位名称：</label>
							<p><span class="dun-sharp" style="height:20px;" v-if="firmDetail.hasPRS === 'Y'"><img src="/dun.png" /></span>{{ firmDetail.name }}</p>
						</div>
						<div>
							<label>关注等级：</label>
							<p>{{ firmDetail.inspectLevel === "High" ? "重点单位" : "普通单位" }}</p>
						</div>
						<div>
							<label>单位性质：</label>
							<p>{{ firmDetail.natureTypeName }}</p>
						</div>
					</div>
					<div class="info-line">
						<div>
							<label>单位地址：</label>
							<p>{{ firmDetail.address }}</p>
						</div>
						<div>
							<label>辖区派出所：</label>
							<p>{{ firmDetail.psName }}</p>
						</div>
					</div>
				</div>
				<div class="title" style="margin-top: 10px">资产统计</div>
				<div class="body">
					<a-tabs style="margin-top: 20px" v-model:activeKey="activeKey" type="card">
						<a-tab-pane key="1" tab="端口开放">
							<div class="form-card">
								<div class="title-msg">
									(
									<span style="color: #4687ff">{{ assets.ipCount }}</span>
									IP总数，
									<span style="color: #4687ff">{{ assets.assetCount }}</span>
									资产总数 ) 有端口开放
									<span style="color: #4687ff">
										{{ assets.portAssetOpenCount }}
									</span>
									个 无端口开放
									<span style="color: #4687ff">{{ assets.portAssetCloseCount }}</span>
									个 共检出端口
									<span style="color: #4687ff">
										{{ assets.portAssetCount }}
									</span>
									个 高危端口
									<span style="color: #4687ff">{{ assets.portHighRiskCount }}</span>
									个
								</div>
								<div class="body data-table">
									<a-table :scroll="{ x: 1090, y: 150 }" :rowKey="(record) => record.id" :columns="gridDatas.columns" :data-source="gridDatas.data" :pagination="gridDatas.pageData" @change="handleTableChange"></a-table>
								</div>
							</div>
						</a-tab-pane>
						<a-tab-pane key="2" tab="网站测绘" force-render>
							<div class="form-card">
								<div class="title-msg">
									(
									<span style="color: #4687ff">{{ assets.urlCount }}</span>
									网站总数，
									<span style="color: #4687ff">{{ assets.appAssetScanCount }}</span>
									共检测资产总数 ) 有组件资产数
									<span style="color: #4687ff">
										{{ assets.appAssetOpenCount }}
									</span>
									个 无组件资产数
									<span style="color: #4687ff">{{ assets.appAssetCloseCount }}</span>
									个
								</div>
								<div class="body data-table">
									<a-table :scroll="{ x: 1050, y: 150 }" :rowKey="(record) => record.id" :columns="gridDatas2.columns" :data-source="gridDatas2.data" :pagination="gridDatas2.pageData" @change="handleTableChange2">
										<template #layers="{ record }">
											<div v-for="(item, key) of JSON.parse(record['layer'])" :key="item">
												<a-tag color="#4687FF" v-if="key === 'application'">应用层</a-tag>
												<a-tag color="#FFD966" v-else-if="key === 'service'">服务层</a-tag>
												<a-tag color="#77ff66" v-else-if="key === 'support'">支撑层</a-tag>
												<a-tag color="#f666ff" v-else-if="key === 'hardware'">硬件层</a-tag>
												<a-tag color="#ffa666" v-else>系统层</a-tag>
												<span v-for="tool of item" :key="tool">{{ tool.name }},</span>
											</div>
										</template>
									</a-table>
								</div>
							</div>
						</a-tab-pane>
					</a-tabs>
				</div>
				<div class="title" style="margin: 10px 0">漏洞信息</div>
				<div class="bug-body">
					<div class="data-table">
						<a-table :scroll="{ x: 640, y: 150 }" :rowKey="(record) => record.id" :columns="gridDatas3.columns" :data-source="gridDatas3.data" :pagination="gridDatas3.pageData" @change="handleTableChange3">
							<template #severity="{ text }">
								<span>
									<a-tag color="#4687FF" v-if="text === 'Low'">低危</a-tag>
									<a-tag color="#d0ab10" v-else-if="text === 'Medium'">中危</a-tag>
									<a-tag color="#FC890C" v-else-if="text === 'High'">高危</a-tag>
								</span>
							</template>
							<template #vulnType="{ text }">
								<span>
									<span v-if="text === 'Sys'">系统漏洞</span>
									<span v-else-if="text === 'App'">应用漏洞</span>
								</span>
							</template>
						</a-table>
					</div>
					<div id="bug-chart" ref="bugchart" class="bug-chart"></div>
					<div class="chart-info">
						<div class="high">
							高危
							<span>{{ vulns.highBugCount }}</span>
						</div>
						<div class="medium">
							中危
							<span>{{ vulns.mediumBugCount }}</span>
						</div>
						<div class="low">
							低危
							<span>{{ vulns.lowBugCount }}</span>
						</div>
					</div>
				</div>
				<!-- <div class="title" style="margin: 10px 0">通报统计</div>
            <div class="tongbao-body">
                <div id="tongbao-chart" class="tongbao-chart"></div>
                <div class="chart-info">
                    <div class="type1">
                        共有
                        <span>26</span>
                        条通报
                    </div>
                    <div class="type2">
                        已处理
                        <span>2</span>
                        条
                    </div>
                    <div class="type3">
                        未处理
                        <span>3</span>
                        条
                    </div>
                    <div class="type4">
                        待上传
                        <span>4</span>
                        条
                    </div>
                </div>
            </div> -->
			</div>
		</transition>
		<div class="dialog-bg" v-if="showDialog"></div>
	</div>
</template>
<style lang="scss">
$w: 100/1920;
$h: 100/1080;
@font-face {
	font-family: "impact";
	src: url("~@/assets/mapView/impact.ttf");
}
.dialog-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 50, 0.3);
	z-index: 98;
}
.company-detail-dialog {
	width: 80%;
	max-height: 95%;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgb(0, 45, 105);
	z-index: 99;
	padding: 20px 30px;
	.dialog-close {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 24px;
		height: 24px;
		border-radius: 12px;
		line-height: 24px;
		text-align: center;
		background: rgba(255, 255, 255, 0.5);
		color: #fff;
		font-size: 14px;
		cursor: pointer;
		&:hover {
			background: rgba(255, 255, 255, 0.7);
		}
	}
	.title {
		font-size: 16px;
		text-align: left;
		line-height: 20px;
		height: 20px;
		border-left: 4px solid #3faffe;
		color: #fff;
		padding-left: 10px;
	}
}
.info-line {
	display: flex;
	margin: 10px 0;
	> div {
		position: relative;
		line-height: 28px;
		height: 28px;
		font-size: 12px;
		flex: 0 0 auto;
		color: #fff;
		padding-left: 100px;
		text-align: left;
		&:first-child {
			width: 40%;
		}
		&:nth-child(2) {
			width: 40%;
		}
		&:nth-child(3) {
			width: 20%;
		}
		label {
			position: absolute;
			left: 0;
			top: 0;
			line-height: 28px;
			font-size: 12px;
			text-align: right;
			width: 100px;
		}
	}
}
.form-card {
	text-align: left;
	.title-msg {
		color: #fff;
		margin-bottom: 10px;
	}
}
.bug-body {
	display: flex;
	.data-table {
		width: 60%;
		flex: 0 0 auto;
	}
	.bug-chart {
		width: 20%;
		flex: 0 0 auto;
		height: 150px;
	}
	.chart-info {
		width: 20%;
		flex: 0 0 auto;
		height: 150px;
		text-align: left;
		box-sizing: border-box;
		padding-top: 10px;
		> div {
			height: 20px;
			line-height: 20px;
			padding-left: 8px;
			margin-top: 15px;
			color: #fff;
			border-left: 4px solid #f45627;
			&.medium {
				border-left: 4px solid #f4a715;
			}
			&.low {
				border-left: 4px solid #feea06;
			}
			span {
				color: #00b0d4;
				margin-left: 20px;
			}
		}
	}
}
.tongbao-body {
	width: 50%;
	display: flex;
	.chart-info {
		width: 50%;
		flex: 0 0 auto;
		height: 120px;
		text-align: left;
		box-sizing: border-box;
		> div {
			height: 20px;
			line-height: 20px;
			padding-left: 8px;
			margin-top: 10px;
			color: #fff;
			display: flex;
			align-items: center;
			&:first-child {
				margin-top: 0;
			}
			&:before {
				width: 32px;
				height: 16px;
				content: "";
				display: block;
				border-radius: 3px;
				margin-right: 10px;
			}
			&.type1 {
				&:before {
					background: #f65452;
				}
			}
			&.type2 {
				&:before {
					background: #2196f3;
				}
			}
			&.type3 {
				&:before {
					background: #ffca3e;
				}
			}
			&.type4 {
				&:before {
					background: #4f668c;
				}
			}
			span {
				color: #00b0d4;
				margin-left: 20px;
			}
		}
	}
}
#tongbao-chart {
	width: 50%;
	flex: 0 0 auto;
	height: 120px;
}
.dun-sharp {
	margin-left: 1rem;
	color: rgb(150, 233, 212);
	font-size: 1rem;
	line-height: 2rem;
	img {
		width: 2rem;
		margin-right: 1rem;
	}
}
.amap-info-window {
	.amap-info-sharp {
		background: rgba(5, 67, 109, 0.8);
		color: #fff;
		padding: 2rem;
		font-size: 1.2rem;
		.dun-sharp {
			text-align: left;
			color: rgb(150, 233, 212);
			font-size: 1rem;
			line-height: 2rem;
			img {
				width: 2rem;
				margin-right: 1rem;
			}
		}
		.title {
			font-size: 1.6rem;
		}
	}
}
.alt-list {
	position: relative;
	background: #014e9bf6;
	width: 510vw * $w;
	left: 510vw * $w;
	bottom: 160%;
	overflow: auto;
	.grid-body-title div,
	.list div {
		padding-left: 8px;
		padding-right: 8px;
	}
	.grid-body {
		height: 350vh * $h !important;
		overflow: auto;
	}
}
.map-view {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background: url("~@/assets/mapView/bg.jpg");
	.card {
		width: 100%;
		height: 50%;
		.title {
			width: 65%;
			color: #fff;
			text-align: left;
			font-size: 1.5rem;
			font-weight: bold;
			padding-top: 0.3rem;
			padding-bottom: 0.5rem;
			padding-left: 3rem;
			color: #fff;
			text-align: left;
			background: url("~@/assets/mapView/titleBg.png");
			background-size: 100% 100%;
		}
		.tabs {
			display: flex;
			color: #fff;
			div {
				background: #052956;
				margin: 0.2rem;
				padding: 0.5rem;
				font-size: 1.2rem;
				a {
					text-decoration: none;
					color: #fff;
				}
			}
			.active {
				background: #0161c2;
			}
		}

		.grid-body {
			text-align: center;

			&-title {
				display: flex;
				background: #04205bc4;
				padding: 0.5rem;
				div {
					width: 33%;
					font-size: 1.2rem;
					color: #fff;
				}
			}
			.list {
				display: flex;
				padding: 0.5rem;
				border-bottom: 1px solid #04205bc4;
				div {
					width: 33%;
					font-size: 1.2rem;
					color: #fff;
					overflow: hidden;
					white-space: nowrap;
					word-break: normal;
				}
				&:hover {
					background: #fa8f3d;
				}
			}
		}
	}
	.view-bg {
		width: 100%;
		height: 100%;
	}
	.view-body {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		box-sizing: border-box;
		padding-top: 54px;
		overflow: hidden;
		.view-box {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 8;
			display: flex;
			justify-content: space-around;
			align-items: flex-end;
			pointer-events: none;
			margin-top: -18px;
			&-left {
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: flex-start;
				width: 484vw * $w;
				pointer-events: auto;
				&-top {
					width: 484vw * $w;
					height: 164vh * $h;
					display: flex;
					.view-data-column {
						flex: 1;
						text-align: left;
						height: 164vh * $h;
						.view-data-item {
							padding-left: 28vw * $w;
							padding-top: 10vh * $h;
							position: relative;
							height: 82vh * $h;
							box-sizing: border-box;
							.data-icon {
								width: 18vw * $w;
								height: 18vw * $w;
								position: absolute;
								left: 0;
								top: 14vh * $h;
							}
							&:first-child {
								padding-top: 0;
								height: 72vh * $h;
								.data-icon {
									top: 4vh * $h;
								}
							}
							.data-text {
								.data-name {
									font-size: 1.4rem;
									color: #fff;
									// margin-bottom: 10vh * $h;
								}
								.data-value {
									font-size: 2.4rem;
									font-family: "impact";
									flex-direction: column;
									justify-content: space-between;
									flex-direction: row;
									flex-wrap: wrap;
									color: #00dcff;
									span {
										font-family: "Microsoft YaHei";
										font-size: 1.2rem;
										color: #fff;
									}
								}
							}
						}
					}
				}
				&-center,
				&-bottom {
					width: 500vw * $w;
					height: 430vh * $h;
					background: rgba(39, 0, 116, 0.2);
					//   background: url("~@/assets/mapView/boxbg1.png");
					//   background-size: 100% 100%;
					.lab {
						position: relative;
						width: 200vw * $w;
						top: 5rem;
						float: right;
						display: flex;
						display: -webkit-flex;
						justify-content: space-between;
						flex-direction: row;
						flex-wrap: wrap;
						color: #fff;
						font-size: 1.2rem;
						div {
							padding-left: 1rem;
							margin: 1rem;
						}
					}
				}
				&-bottom {
					height: 310vh * $h;
					.grid-body {
						overflow: auto;
						height: 100%;
					}
				}
			}
			&-right {
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: flex-start;
				width: 484vw * $w;
				pointer-events: auto;
				&-top {
					height: 154vh * $h;
					overflow: scroll;
					background: rgba(39, 0, 116, 0.2);
					.view-data-column {
						flex: 1;
						text-align: left;
						height: 164vh * $h;
						.view-data-item {
							padding-left: 28vw * $w;
							padding-top: 10vh * $h;
							position: relative;
							height: 82vh * $h;
							box-sizing: border-box;
							.data-icon {
								width: 18vw * $w;
								height: 18vw * $w;
								position: absolute;
								left: 0;
								top: 14vh * $h;
							}
							&:first-child {
								padding-top: 0;
								height: 72vh * $h;
								.data-icon {
									top: 4vh * $h;
								}
							}
							.data-text {
								.data-name {
									font-size: 1.4rem;
									color: #fff;
									margin-bottom: 10vh * $h;
								}
								.data-value {
									font-size: 2.4rem;
									font-family: "impact";
									color: #00dcff;
									span {
										font-family: "Microsoft YaHei";
										font-size: 1.2rem;
										color: #fff;
									}
								}
							}
						}
					}
				}
				&-bottom {
					overflow: hidden;
                    .fengxian-box{
                        transition: all 0.2s;
                        transform:translateY(0);
                    }
					.fengxian-body {
						margin: 0.2rem;
						background: #02407ee1;
						color: #e8eaec;
						font-size: 1.2rem;
						text-align: left;
						padding: 0.5rem;
						.up {
							display: flex;
							div {
								width: 33%;
								padding: 0.5rem;
							}
							.age-Medium {
								border: 1px solid #d3ee5e;
								border-radius: 2px;
								background: #a4c314b3;
								padding: 0 0.3rem;
							}
							.age-Low {
								border: 1px solid #5eb4ee;
								border-radius: 2px;
								background: #5ec5eec5;
								padding: 0 0.3rem;
							}
							.age-High {
								border: 1px solid #ee805e;
								border-radius: 2px;
								background: #ee875ec5;
								padding: 0 0.3rem;
							}
						}
					}
					.no1 {
						border-left: 6px solid #509cf3;
						background: #2c228383;
					}
				}
				&-center {
					width: 484vw * $w;
					height: 400vh * $h;
					overflow: hidden;
					background: rgba(39, 0, 116, 0.2);
					.list-body {
						max-height: 150vh * $h;
						overflow: scroll;
					}
					.tongbao-list {
						width: 484vw * $w;
						height: 200vh * $h;
					}
					.grid-body {
						min-height: 90vw * $h;
						max-height: 90vw * $h;
						overflow: auto;
					}
				}
				&-bottom {
					width: 484vw * $w;
					height: 360vh * $h;
					background: rgba(39, 0, 116, 0.2);
					// background: url("~@/assets/mapView/boxbg1.png");
					// background-size: 100% 100%;
				}
			}
			&-center {
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: flex-start;
				width: 832vw * $w;
				pointer-events: none;
				&-bottom {
					display: flex;
					width: 842vw * $w;
					height: 208vh * $h;
					margin-top: 800vh * $h;
					p {
						position: relative;
						color: #fff;
						font-size: 2em;
						top: 208px;
					}
					.card-body {
						padding: 2.5rem;
						display: flex;
						background: #04205bc4;
						color: #fff;
						font-size: 1.2rem;
						div {
							text-align: center;
							margin-right: 5vw * $w;
						}

						.title-two {
							border-left: 2px solid #0058b3;
							width: 65vw * $w;
							margin: 0 auto;
							&-text {
								margin-left: 25vw * $w;
								padding-bottom: 5vw * $h;
							}
						}
						.b1 {
							width: 50vw * $h;
							height: 50vw * $h;
							background: url("~@/assets/mapView/jianyan/1.png");
							background-size: 100% 100%;
						}
						.b2 {
							width: 50vw * $h;
							height: 50vw * $h;
							background: url("~@/assets/mapView/jianyan/2.png");
							background-size: 100% 100%;
						}
						.b3 {
							width: 50vw * $h;
							height: 50vw * $h;
							background: url("~@/assets/mapView/jianyan/3.png");
							background-size: 100% 100%;
						}
						.b1,
						.b2,
						.b3 {
							.title-logo {
								position: relative;
								top: 16vw * $h;
								img {
									width: 18vw * $h;
									height: 18vw * $h;
								}
							}
						}
					}
					// background: red;
					// background: url("~@/assets/mapView/boxbg2.png");
					// background-size: 100% 100%;
					pointer-events: auto;
				}
			}
		}
		.earthmap-view {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("~@/assets/mapView/earthbg.png") center center repeat;
			background-size: 1920px 1080px;
			background-position: 0px 0px;
			// animation: backgroundmove linear 180s infinite both;
		}
	}
	#earthmap {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.4s;
		display: none;
		opacity: 1;
		&.show {
			display: block;
		}
		&.fadeOut {
			transform: translate(-50%, -50%) scale(2, 2);
			opacity: 0;
		}
	}
	#amap {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.4s;
		display: none;
		opacity: 1;
		&.show {
			display: block;
		}
		&.init {
			display: block;
			opacity: 0;
		}
		&.fadeOut {
			transform: translate(-50%, -50%) scale(0.01, 0.01);
			opacity: 0;
		}
	}
	.header {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 8;
		height: (54vh * $h);
		width: 100%;
		text-align: center;
		img {
			display: block;
			margin: 0 auto;
			height: (54vh * $h);
			width: 100%;
		}
	}
}
@keyframes backgroundmove {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 1920px 0px;
	}
}
.amap-info-sharp {
	border: 1px solid #09f;
	p {
		white-space: nowrap;
	}
}
.ant-tabs-bar {
	border-bottom: none;
	text-align: left;
	margin-bottom: 0;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
	background: #0f3e91;
	border-radius: 8px 8px 0px 0px;
	color: #fff;
	border: none;
	width: 70px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	padding: 0 5px;
	margin-right: 10px;
	&:before {
		content: normal;
	}
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
	background: #245bbd;
	border-radius: 8px 8px 0px 0px;
	color: #fff;
	border: none;
	width: 70px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	text-align: center;
	padding: 0 5px;
	&:before {
		content: normal;
	}
}
.data-table {
	.ant-table {
		background: #245bbd;
	}
	.ant-table-thead > tr > th {
		background: #245bbd;
	}
	.ant-table-tbody > tr {
		&:hover > td {
			background-color: #2762cb !important;
		}
	}
	.ant-table-tbody > tr.ant-table-row {
		&:nth-child(odd) {
			td {
				background: rgb(0, 45, 105);
			}
		}
		&:nth-child(even) {
			td {
				background: #0540a9;
			}
		}
	}
	.ant-table-thead > tr > th,
	.ant-table-tbody > tr > td {
		padding: 4px 16px;
		border: none;
		color: #fff;
	}
	.ant-table-placeholder {
		background: #0540a9;
		color: #fff;
		border: none;
		padding: 8px 16px;
		.ant-empty-description {
			color: #fff;
		}
	}
}
.company-detail-dialog .ant-table-body {
	background: rgb(0, 45, 105);
}
.company-detail-dialog .ant-table:not(.ant-table-empty) .ant-table-body {
	height: 150px;
}
.ant-table-body::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
	height: 10px;
	display: block;
	background: rgb(0, 45, 105);
}
.ant-table-body::-webkit-scrollbar-corner {
	background: rgb(0, 45, 105);
}
.ant-table-body::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	background-color: #0c58c1;
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
}
.ant-table-body::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	background: rgba(0, 0, 0, 0.1);
}

.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-jump-prev,
.ant-pagination-jump-next {
	min-width: auto;
	height: 20px;
	line-height: 20px;
}
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
	background: none;
	border: none;
}
.ant-pagination-disabled a,
.ant-pagination-disabled:hover a,
.ant-pagination-disabled:focus a,
.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-disabled:hover .ant-pagination-item-link,
.ant-pagination-disabled:focus .ant-pagination-item-link {
	color: #aaa;
}
.ant-pagination-item {
	min-width: auto;
	height: 20px;
	line-height: 20px;
	background: none;
	border: none;
	margin-right: 0;
}
.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis,
.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
	color: #aaa;
}
.ant-pagination-item a,
.ant-pagination-prev a,
.ant-pagination-next a {
	color: #fff;
}
.ant-pagination-item-active a {
	color: #1890ff;
}
.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
	background: #002d69;
}
.ant-table-header {
	background: none;
}

.fade-enter-active,
.fade-leave-active {
	transition: all 0.5s cubic-bezier(0.68, 0, 0.27, 1.55);
}

.fade-enter-from,
.fade-leave-to {
	transform: translate(-50%, -50%) scale(0.1, 0.1);
	opacity: 0;
}
.list-enter,
.list-enter-from,
.list-leave-to {
opacity: 0.5;
transform: translateX(100%);
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
.list-leave-active{
    position: absolute;
}
</style>
<script>
import * as echarts from "echarts";
import "vue-bmap-gl/dist/style.css";
import {
	// TitleComponent,
	ToolboxComponent,
	TooltipComponent,
	VisualMapComponent,
	GraphicComponent,
} from "echarts/components";
import { MapChart, ScatterChart, PieChart, BarChart, LineChart } from "echarts/charts";
import { GlobeComponent } from "echarts-gl/components";
import { Scatter3DChart } from "echarts-gl/charts";
import { CanvasRenderer } from "echarts/renderers";
import "echarts-gl";

let myChart, detailBugChart, detailTongbaoChart;
let bugChart;
// eslint-disable-next-line no-unused-vars
let zicanChart;
// eslint-disable-next-line no-unused-vars
let workChart;
// eslint-disable-next-line no-unused-vars
let fenbuChart;
// eslint-disable-next-line no-unused-vars
let fengXianChart;
// eslint-disable-next-line no-unused-vars
let tongbaoChart;
// eslint-disable-next-line no-unused-vars
let canvas;
// eslint-disable-next-line no-unused-vars
let bugChartData;

echarts.use([
	// TitleComponent,
	ToolboxComponent,
	TooltipComponent,
	VisualMapComponent,
	GlobeComponent,
	GraphicComponent,
	PieChart,
	BarChart,
	LineChart,
	MapChart,
	ScatterChart,
	CanvasRenderer,
	Scatter3DChart,
]);
import AMapLoader from "@amap/amap-jsapi-loader";
import animateNumber from "@/components/animateNumber";
// import dataJson from "@/router/data";
import httpRequest from "@/router/httpRequest";
import { Tabs, Table, Tag } from "ant-design-vue";

export default {
	components: {
		"animate-number": animateNumber,
		ATabs: Tabs,
		aTabPane: Tabs.TabPane,
		ATable: Table,
		aTag: Tag,
	},
	data() {
		return {
			showDialog: false,
			isShowTop: true,
			topTitle: "Top 10",
			showMap: false,
			fadeEarth: false,
			activeKey: "1",
			fadeMap: true,
			initMap: true,
			msgs: [],
			riskRank: [],
			riskRankBugs: [],
			isShowRiskRankBugs: false,
			pagedata: {},
            riskList:[],
			firmDetail: {},
			vulns: {},
			assets: {},
			firmId: null,
			bugChartDatas: [
				{ value: 0.05, name: "系统层", itemStyle: { color: "#34a8fe" } },
				{ value: 0.25, name: "服务层", itemStyle: { color: "#19dc7c" } },
				{ value: 0.35, name: "应用层", itemStyle: { color: "#8c70f8" } },
				{ value: 0.2, name: "支持层", itemStyle: { color: "#fa8f3d" } },
				{ value: 0.5, name: "硬件层", itemStyle: { color: "#4e5fcc" } },
			],
			zoom: 1,
			isChangeZoom: true,
			gridDatas: {
				pageData: {
					total: 0,
					current: 1,
					firmId: "",
					keywords: "",
					pageNo: "1",
					pageSize: 10,
					hideOnSinglePage: true,
				},
				data: [],
				columns: [
					{
						title: "IP状态",
						dataIndex: "offline",
						key: "offline",
						width: 100,
						slots: {
							customRender: "offline",
						},
					},
					{
						title: "IP",
						width: 120,
						dataIndex: "value",
						key: "value",
					},
					{
						title: "端口",
						width: 80,
						dataIndex: "port",
						key: "port",
					},
					{
						title: "服务协议",
						width: 100,
						dataIndex: "protocol",
						key: "protocol",
					},
					{
						title: "组件",
						width: 260,
						dataIndex: "layer",
						key: "layer",
						slots: {
							customRender: "layers",
						},
					},
					{
						title: "原始数据",
						width: 340,
						dataIndex: "banner",
						key: "banner",
					},
					{
						title: "业务系统",
						width: 90,
						dataIndex: "banner",
						key: "banner",
					},
				],
			},
			gridDatas2: {
				pageData: {
					total: 0,
					current: 1,
					firmId: "",
					keywords: "",
					pageNo: "1",
					pageSize: 10,
					hideOnSinglePage: true,
				},
				data: [],
				columns: [
					{
						title: "网站状态",
						dataIndex: "offline",
						width: 90,
						key: "offline",
						slots: {
							customRender: "offline",
						},
					},
					{
						title: "主页地址",
						width: 260,
						dataIndex: "value",
						key: "value",
					},
					{
						title: "网站标题",
						width: 260,
						dataIndex: "title",
						key: "title",
					},
					{
						title: "组件",
						width: 350,
						dataIndex: "layer",
						key: "layer",
						slots: {
							customRender: "layers",
						},
					},
					{
						title: "业务系统",
						width: 90,
						dataIndex: "banner",
						key: "banner",
					},
				],
			},
			gridDatas3: {
				pageData: {
					total: 0,
					current: 1,
					firmId: "",
					keywords: "",
					pageNo: "1",
					pageSize: 10,
					hideOnSinglePage: true,
				},
				data: [],
				columns: [
					{
						title: "威胁名称",
						width: 250,
						dataIndex: "vulnName",
						key: "vulnName",
					},
					{
						title: "威胁等级",
						width: 90,
						dataIndex: "severity",
						key: "severity",
						slots: {
							customRender: "severity",
						},
					},
					{
						title: "威胁类型",
						width: 120,
						dataIndex: "vulnType",
						key: "vulnType",
						slots: {
							customRender: "vulnType",
						},
					},
					{
						title: "发现时间",
						width: 180,
						dataIndex: "createTime",
						key: "createTime",
					},
				],
			},
		};
	},
	mounted() {
		sessionStorage.setItem("token", this.$route.query.t);
		this.getData();
		// 漏洞
		bugChart = echarts.init(document.getElementById("bugTu"));
		// 基础资产
		zicanChart = echarts.init(document.getElementById("zican"));
		// 基础资产
		// workChart = echarts.init(document.getElementById("work"));
		// 区域分布
		// fenbuChart = echarts.init(document.getElementById("fenbu"));
		//  风险分布
		// fengXianChart = echarts.init(document.getElementById("fengXian"));
		//  通報
		tongbaoChart = echarts.init(document.getElementById("tongbao"));

		// 漏洞分布饼图数据
		bugChartData = {
			title: {
				text: "资产类型统计",
				left: "center",
				textStyle: {
					color: "#fff",
				},
			},
			tooltip: {
				trigger: "item",
				formatter: "{b}  <br/> 资产数：{c} 个 ({d}%)",
			},
			series: [
				{
					name: "",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["25%", "50%"],
					animationType: "scale",
					animationEasing: "elasticOut",
					label: {
						show: false,
						// position: "inside",
						// formatter: "{b}:{c}"
					},
					emphasis: {
						shadowBlur: 10,
						shadowOffSetX: 0,
						label: {
							show: false,
						},
					},
					data: this.bugChartDatas,
				},
			],
		};

		// bugChart.setOption(bugChartData);
	},
	beforeCreate() {
		if (myChart) {
			myChart.clear();
		}
	},
	methods: {
		closeBugs() {
			this.isShowRiskRankBugs = false;
			this.riskRankBugs = [];
		},
		showBugs(item) {
			this.riskRankBugs = item.bugList;
			if (this.riskRankBugs.length == 0) {
				this.isShowRiskRankBugs = false;
			} else {
				this.isShowRiskRankBugs = true;
			}
		},
		changeMap() {
			myChart.clear();
			this.setupWorld();
			this.zoom = 1;
			this.fadeMap = true;
			setTimeout(() => {
				this.showMap = false;
				setTimeout(() => {
					this.fadeEarth = false;
				}, 10);
			}, 500);
		},
		mousewheel(e) {
			var wheel = e.wheelDelta || e.detail;
			if (wheel > 0) {
				//当滑轮向上滚动时
				if (this.zoom === 1 && this.isChangeZoom) {
					this.zoom = 2;
					this.fadeEarth = true;
					setTimeout(() => {
						this.showMap = true;
						setTimeout(() => {
							this.fadeMap = false;
						}, 0);
					}, 500);
					this.isChangeZoom = false;
					setTimeout(() => {
						this.isChangeZoom = true;
					}, 1000);
				}
			}
		},
		setupWorld() {
			// 地球
			const arrPointer = this.pagedata.importantFirms.slice(0, 5).map((e) => {
				return [Number(e.mapPointStr.split(",")[0]), Number(e.mapPointStr.split(",")[1]), 1];
			});
			myChart = echarts.init(document.getElementById("earthmap"));
			myChart.setOption({
				backgroundColor: "transparent",
				// tooltip: {
				//   trigger: "item",
				//   formatter:
				//     "上海文鳐信息科技有限公司<br/>105.68.52.152<br>漏洞数量：12<br>资产数量：3",
				//   backgroundColor: "rgba(50,150,250,0.4)",
				//   borderColor: "rgba(150,200,252,0.6)",
				//   textStyle: {
				//     color: "#fff"
				//   }
				// },
				globe: {
					baseTexture: "/world.png",
					environment: "auto",
					globeRadius: 400,
					globeOuterRadius: 400,
					top: "4%",
					bottom: "12%",
					zoom: 10,
					// shading: 'lambert',
					light: {
						// 光照阴影
						main: {
							color: "#fff", // 光照颜色
							intensity: 1.2, // 光照强度
							// shadowQuality: 'high', //阴影亮度
							shadow: true, // 是否显示阴影
							alpha: 1,
							beta: -30,
						},
						ambient: {
							intensity: 1,
						},
					},
					viewControl: {
						// alpha: 100,
						beta: 160,
						// targetCoord: [116.46, 39.92],
						autoRotate: true,
						autoRotateSpeed: 10,
						autoRotateAfterStill: 5,
						distance: 600,
						minDistance: 0,
						maxDistance: 1600,
						zoomSensitivity: 0,
						targetCoord: [96.46, 39.92],
					},
				},
				series: [
					{
						type: "scatter3D",
						coordinateSystem: "globe",
						blendMode: "source-over",
						symbol: "pin",
						symbolSize: [6, 20],
						itemStyle: {
							color: "rgb(200, 230, 255)",
							opacity: 1,
						},
						label: {
							show: false,
						},
						emphasis: {
							label: {
								show: false,
							},
						},
						data: arrPointer,
					},
				],
			});
		},
		getData() {
			httpRequest.post("大屏", {}).then((res) => {
				for (let i = 0; i < res.data.importantFirms.length; i++) {
					switch (res.data.importantFirms[i].firmId) {
						case 101085:
							res.data.importantFirms[i].mapPointStr = "120.95717,31.861633";
							break;
						case 100962: //惠生
							res.data.importantFirms[i].mapPointStr = "120.941313,31.857999";
							res.data.importantFirms[i].hasPRS = "Y";
							break;
						case 100963: //瑞慈
							res.data.importantFirms[i].mapPointStr = "120.91066,31.940087";
							res.data.importantFirms[i].hasPRS = "Y";
							break;
					}
				}
				this.pagedata = res.data;
				this.pagedata.riskCount = Number(this.pagedata.riskCount/3).toFixed();
				this.pagedata.countData1 = Number(this.pagedata.riskCount/60).toFixed();
				this.pagedata.countData2 = Number(this.pagedata.riskCount/60/500).toFixed();
				this.pagedata.newRisks = [];
				this.msgs = res.data.userMessages;
				this.riskRank = res.data.riskRank;
				this.changeZiChanChart();
				this.changeBugChart();
				this.changeTongBaoChart();
				// this.setupMap();
				// this.changeFenBuChart();
				// this.changeFengXianChart();
				let all = 0;
				let psAssetCount = this.pagedata.psStatistics.data.psAssetCount;
				for (let i = 0; i < psAssetCount.length; i++) {
					all += psAssetCount[i] * 1;
				}
				this.changeBugChart(all, "Y");
				// 實時風險
				this.getFenXianData();
				this.setupWorld();
				this.setupMap();
			});
		},
		async getFenXianData() {
            httpRequest.post("实时风险", {}).then(async (res) => {
                if(this.riskList.length === 0){
                    for(let i=0;i<res.data.length;i++){
                        await new Promise(resolve=>{
                            setTimeout(()=>{
                                this.riskList.push(res.data[i]);
                                this.pagedata.newRisks.push(res.data[i]);
                                console.log(i);
                                resolve();
                            },20);
                        })
                    }
                }else{
                    const obj = {};
                    this.riskList.forEach(e=>{
                        obj[e.id] = e;
                    });
                    res.data.forEach(e=>{
                        if(obj[!e.id]){
                            this.riskList.unshift(e);
                            if(this.riskList.length>30){
                                this.riskList.pop();
                            }
                        }
                    })
                    this.pagedata.newRisks = [...this.riskList];
                }
                for(let a = 0;a<5;a++){
                    const obj = {...this.riskList[a]};
                    obj.id = obj.id+"_temp";
                    this.pagedata.newRisks.push(obj);
                }
                this.$nextTick(async ()=>{
                    this.riskList.forEach(e=>{
                        const dom = this.$refs['riskItem'+e.id];
                        e.offsetTop = dom.offsetTop;
                    })
                    const dom2 = this.$refs['riskItem'+this.riskList[0].id+"_temp"];
                    this.pagedata.newRisks[this.riskList.length].offsetTop = dom2.offsetTop;
                    for(let i=0;i<this.riskList.length;i++){
                        const e = this.riskList[i];
                        await this.riskTranslate(e);
                    }
                    await this.riskTranslate(this.pagedata.newRisks[this.riskList.length]);
                    await new Promise(resolve=>{
                        setTimeout(()=>{
                            this.$refs.riskBox.style.transition = "none";
                            this.$refs.riskBox.style.transform="translateY(0px)";
                            resolve();
                        },200);
                    })
                    console.log("done");
                    await new Promise(resolve=>{
                        setTimeout(()=>{
                            this.$refs.riskBox.style.transition = "all 0.2s";resolve();
                        },100);
                    })
                    this.getFenXianData();
                    
                });
            });
		},
        riskTranslate(e){
            return new Promise(resolve=>{
                setTimeout(() => {
                    console.log(e.id+":"+e.offsetTop);
                    this.$refs.riskBox.style.transform="translateY(-"+e.offsetTop+"px)";
                    resolve();
                }, 1200);
            })
        },
		setupMap() {
			// 资产图数据
			AMapLoader.load({
				key: "1e97390b37701c6461f796389086cf7d",
				version: "2.0",
				plugins: ["AMap.DistrictSearch", "AMap.ElasticMarker"],
			})
				.then((AMap) => {
					new AMap.DistrictSearch({
						extensions: "all",
						subdistrict: 0,
					}).search("崇川区", (status, result) => {
						this.map = new AMap.Map("amap", {
							zoom: 10,
							zooms: [11, 18],
							showIndoorMap: false,
							viewMode: "3D",
							pitch: 40,
							mapStyle: "amap://styles/599c7b44730b51103e1abefee3a577a6",
							center: [120.9273, 31.8298],
							features: ["bg", "point", "road"],
						});
						var outer = [new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), new AMap.LngLat(360, -90, true), new AMap.LngLat(360, 90, true)];
						var holes = result.districtList[0].boundaries;
						var pathArray = [outer];
						pathArray.push.apply(pathArray, holes);
						var polygon = new AMap.Polygon({
							pathL: pathArray,
							//线条颜色，使用16进制颜色代码赋值。默认值为#006600
							strokeColor: "rgb(20,164,173)",
							strokeWeight: 2,
							//轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
							strokeOpacity: 0.5,
							//多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
							fillColor: "rgba(0,0,0)",
							//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
							fillOpacity: 1,
							//轮廓线样式，实线:solid，虚线:dashed
							strokeStyle: "dashed",
							/*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
              ie9+浏览器有效 取值： 
              实线：[0,0,0] 
              虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
              点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
              线和10个像素的空白 （如此反复）组成的虚线*/
							strokeDasharray: [10, 2, 10],
						});
						polygon.setPath(pathArray);

						const layer = new AMap.LabelsLayer({
							zooms: [3, 20],
							zIndex: 111,
							// 关闭标注避让，默认为开启，v1.4.15 新增属性
							animation: false,
							// 关闭标注淡入动画，默认为开启，v1.4.15 新增属性
							collision: false,
						});

						const markers = [];
						const iconlow = {
							type: "image",
							image: "/icon-low.png",
							size: [6, 9],
							anchor: "bottom-center",
							angel: 0,
							retina: true,
						};
						const iconnormal = {
							type: "image",
							image: "/icon-normal.png",
							size: [6, 9],
							anchor: "bottom-center",
							angel: 0,
							retina: true,
						};
						const iconhigh = {
							type: "image",
							image: "/icon-high.png",
							size: [6, 9],
							anchor: "bottom-center",
							angel: 0,
							retina: true,
						};
						const normalMarker = new AMap.Marker({
							offset: new AMap.Pixel(-75, -40),
						});
						let importantFirms = this.pagedata.importantFirms; //本地坐标
						// let importantFirms = dataJson.RECORDS;//本地坐标
						for (var i = 0; i < importantFirms.length; i++) {
							const item = importantFirms[i];
							let icon;
							if (item.highBugCount > 0) {
								icon = iconhigh;
							} else if (item.mediumBugCount > 0) {
								icon = iconnormal;
							} else {
								icon = iconlow;
							}
							const labelMarker = new AMap.LabelMarker({
								// position: item.lnglat,
								position: [Number(item.mapPointStr.split(",")[0]), Number(item.mapPointStr.split(",")[1])],
								icon,
								extData: item,
							});
							labelMarker.id = item.firmId;
							labelMarker.on("click", (e) => {
								const extdata = e.target.getExtData();
								this.firmId = extdata.firmId;
								this.openDetail();
								setTimeout(() => {
									this.getFirmDetail(extdata.firmId, extdata.hasPRS);
								}, 10);
							});
							normalMarker.on("mouseout", () => {
								this.map.remove(normalMarker);
							});
							markers.push(labelMarker);
						}

						// 地圖事件監聽
						this.map.on("mousewheel", (e) => {
							var wheel = e.originEvent.wheelDelta || e.originEvent.detail;
							if (wheel < 0) {
								if (e.target.getZoom() == 11) {
									this.changeMap();
								}
							}
						});
						// this.map.addEventListener('DOMMouseScroll',(e)=>{
						// 	var wheel = e.originEvent.wheelDelta || e.originEvent.detail;
						//     if (wheel < 0) {
						//         if (e.target.getZoom() == 11) {
						//             this.changeMap();
						//         }
						//     }
						// })

						this.map.add(polygon);
						this.map.add(layer);
						layer.add(markers);
						setTimeout(() => {
							this.initMap = false;
						}, 500);
					});
				})
				.catch(() => {});
		},
		changeTongBaoChart() {
			const color = ["#f7c810", "#8468cc", "#6ab598", "#5fc2ff"];
			const data = this.pagedata.reportStatistics.data.map((e, i) => {
				return {
					value: e,
					itemStyle: {
						color: color[i],
					},
				};
			});
			tongbaoChart.setOption({
				color: ["#f7c810", "#8468cc", "#6ab598", "#5fc2ff"],
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
					},
				},
				grid: {
					top: "18%",
					left: "2%",
					right: "2%",
					bottom: "2%",
					containLabel: true,
				},
				yAxis: [
					{
						type: "category",
						data: this.pagedata.reportStatistics.reportTitles,
						splitLine: {
							show: false,
						},
					},
				],
				xAxis: [
					{
						type: "value",
						min: 0,
						max: this.pagedata.reportStatistics.maxline + 5,
						position: "left",
						axisLine: {
							show: true,
						},
						axisLabel: {
							formatter: "{value} ",
						},
						splitLine: {
							show: false,
						},
					},
				],
				series: [
					{
						name: "单位总数",
						type: "bar",
						data: data,
					},
				],
			});
		},
		changeZiChanChart() {
			let colors = ["#062e69", "rgb(252, 137, 12)", "#f8d446", "#a3cbe5"];
			zicanChart.setOption({
				color: colors,
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
					},
				},
				grid: {
					top: "18%",
					left: "2%",
					right: "2%",
					bottom: "2%",
					containLabel: true,
				},
				itemStyle: {
					color: colors[3],
				},
				// legend: {
				//   itemStyle: {
				//     color: colors[3]
				//   },
				//   data: ["企业总数", "重点企业总数", "资产总数"]
				// },
				xAxis: [
					{
						type: "category",
						itemStyle: {
							color: colors[3],
						},
						data: this.pagedata.psStatistics.areaNames,
						splitLine: {
							show: false,
						},
					},
				],
				yAxis: [
					{
						type: "value",
						name: "数量",
						min: 0,
						max: this.pagedata.psStatistics.maxline,
						position: "left",
						axisLine: {
							show: true,
							lineStyle: {
								color: colors[3],
							},
						},
						axisLabel: {
							formatter: "{value} ",
						},
						splitLine: {
							show: false,
						},
					},
				],
				series: [
					{
						name: "单位总数",
						type: "bar",
						data: this.pagedata.psStatistics.data["psFirmCount"],
					},
					{
						name: "重点单位总数",
						type: "line",
						lineStyle: {
							width: 2,
							type: "dashed",
						},
						yAxis: 0,
						data: this.pagedata.psStatistics.data["psImportantFirmCount"],
					},
					{
						name: "资产总数",
						type: "line",
						lineStyle: {
							width: 2,
							type: "dashed",
						},
						data: this.pagedata.psStatistics.data["psAssetCount"],
					},
				],
			});
			let that = this;
			// 辖区分布饼图事件
			zicanChart.on("click", function (params) {
				that.changeBugChart(that.pagedata.psStatistics.data.psAssetCount[params.dataIndex], "N");
			});
		},
		changeFengXianChart() {
			fengXianChart.setOption({
				title: {
					text: "风险分布统计",
				},
				// legend: {
				//   data: ["Allocated Budget", "Actual Spending"]
				// },

				label: {
					color: "#fff",
				},
				radar: {
					// shape: 'circle',
					indicator: [
						{ name: "主机漏洞", max: 6500 },
						{ name: "暴力破解", max: 16000 },
						{ name: "内网渗透", max: 30000 },
						{ name: "主机漏洞", max: 38000 },
						{ name: "恶意软件", max: 52000 },
						{ name: "暴力攻击", max: 25000 },
					],
				},
				series: [
					{
						name: "Budget vs spending",
						type: "radar",
						data: [
							{
								value: [4200, 3000, 20000, 35000, 50000, 18000],
								name: "Allocated Budget",
							},
							{
								value: [5000, 14000, 28000, 26000, 42000, 21000],
								name: "Actual Spending",
							},
						],
					},
				],
			});
		},
		changeBugChart(all, type) {
			bugChartData.series[0].data = this.bugChartDatas = this.getTestBugNum(all, type);
			bugChart.setOption(bugChartData, true);
		},
		getTestBugNum(totle, type) {
			/**
			 * type = Y
			 * 未选中上方辖区柱状图前提下:
			 * 各类型总数（饼状图总数）=上方5个柱状图总数 * 5；
			 * 应用层总数=上方5个柱状图总数 * 35%；
			 * 服务层总数=上方5个柱状图总数 * 25%
			 * 支撑层总数=上方5个柱状图总数 * 20%
			 * 系统层总数=上方5个柱状图总数 * 15%
			 * 硬件层总数=上方5个柱状图总数 * 5%
			 */
			let arr = [];
			let all = totle * 5;
			if (type == "Y") {
				arr[0] = {
					value: Math.ceil(all * 0.15),
					name: "系统层",
					itemStyle: { color: "#34a8fe" },
				};
				arr[1] = {
					value: Math.ceil(all * 0.25),
					name: "服务层",
					itemStyle: { color: "#19dc7c" },
				};
				arr[2] = {
					value: Math.ceil(all * 0.35),
					name: "应用层",
					itemStyle: { color: "#8c70f8" },
				};
				arr[3] = {
					value: Math.ceil(all * 0.2),
					name: "支持层",
					itemStyle: { color: "#fa8f3d" },
				};
				arr[4] = {
					value: Math.ceil(all * 0.05),
					name: "硬件层",
					itemStyle: { color: "#4e5fcc" },
				};
			} else {
				arr[0] = {
					value: Math.ceil(parseInt(Math.random() * (100 - 1 + 1) + 1, 10)),
					name: "系统层",
					itemStyle: { color: "#34a8fe" },
				};
				arr[1] = {
					value: Math.ceil(parseInt(Math.random() * (100 - 1 + 1) + 1, 10)),
					name: "服务层",
					itemStyle: { color: "#19dc7c" },
				};
				arr[2] = {
					value: Math.ceil(parseInt(Math.random() * (100 - 1 + 1) + 1, 10)),
					name: "应用层",
					itemStyle: { color: "#8c70f8" },
				};
				arr[3] = {
					value: Math.ceil(parseInt(Math.random() * (100 - 1 + 1) + 1, 10)),
					name: "支持层",
					itemStyle: { color: "#fa8f3d" },
				};
				arr[4] = {
					value: Math.ceil(parseInt(Math.random() * (30 - 1 + 1) + 1, 10)),
					name: "硬件层",
					itemStyle: { color: "#4e5fcc" },
				};
			}
			return arr;
		},
		changeWorkChart() {
			let workData = [
				{
					name: "未通报",
					value: this.pagedata.reportStatistics.unReportedCount,
				},
				{ name: "待处理", value: this.pagedata.reportStatistics.reportedCount },
				{ name: "待上传", value: this.pagedata.reportStatistics.handledCount },
				{ name: "待确认", value: this.pagedata.reportStatistics.uploadedCount },
			];
			let nodata = [
				{
					name: "未完成",
					value: this.pagedata.reportStatistics.unConfirmedCount,
				},
			];
			workChart.setOption({
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} 个({d}%)",
				},
				// legend: {
				//   orient: "vertical",
				//   bottom: "40%",
				//   left: "left"
				// },
				series: [
					{
						name: "漏洞分布",
						type: "pie",
						selectedMode: "single",
						radius: [0, "30%"],
						label: {
							position: "inner",
							fontSize: 16,
							formatter: "{b}:{c}",
						},
						labelLine: {
							show: false,
						},
						data: nodata,
					},
					{
						name: "漏洞分布",
						type: "pie",
						radius: ["40%", "70%"],
						center: ["50%", "50%"],
						roseType: "radius",
						label: {
							// position: "inside",
							formatter: "{b}:{c}",
							color: "#fff",
							fontSize: "16",
						},
						emphasis: {
							label: {
								show: true,
								fontSize: "20",
								fontWeight: "bold",
							},
						},
						data: workData,
					},
				],
			});
		},
		changeFenBuChart() {
			let colors = ["#5470C6", "#91CC75", "#ef9839", "#FFF"];
			fenbuChart.setOption({
				color: colors,
				title: {
					text: "辖区分布",
					left: "center",
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
					},
				},
				xAxis: [
					{
						type: "category",
						axisLine: {
							show: true,
							lineStyle: {
								color: colors[3],
							},
						},
						// prettier-ignore
						data: this.pagedata.reportAreaStatistics.areas,
					},
				],
				yAxis: [
					{
						type: "value",
						name: "",
						min: 0,
						max: this.pagedata.reportAreaStatistics.maxline * 3,
						position: "left",
						color: colors[3],
						axisLine: {
							show: true,
							lineStyle: {
								color: colors[3],
							},
						},
						axisLabel: {
							formatter: "{value}",
						},
					},
				],
				series: [
					{
						name: "待确认",
						type: "bar",
						data: this.pagedata.reportAreaStatistics.data["Uploaded"],
					},
					{
						name: "待上传",
						type: "bar",
						yAxis: 0,
						data: this.pagedata.reportAreaStatistics.data["Handled"],
					},
					{
						name: "未通报",
						type: "bar",
						data: this.pagedata.reportAreaStatistics.data["UnReported"],
					},
					{
						name: "待处理",
						type: "bar",
						data: this.pagedata.reportAreaStatistics.data["Reported"],
					},
				],
			});
		},
		InitdetailBugChart(data) {
			detailBugChart.setOption({
				color: ["#f45627", "#f4a715", "#feea06"],
				series: [
					{
						name: "漏洞数量",
						type: "pie",
						radius: ["40%", "70%"],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 5,
							borderWidth: 0,
						},
						label: {
							show: false,
							position: "center",
						},
						labelLine: {
							show: false,
						},
						data: data,
					},
				],
			});
		},
		InitdetailTongbaoChart() {
			detailTongbaoChart.setOption({
				color: ["#2196f3", "#ffca3e", "#4f668c"],
				series: [
					{
						name: "通报数量",
						type: "pie",
						radius: "90%",
						label: {
							show: false,
							position: "center",
						},
						labelLine: {
							show: false,
						},
						data: [
							{ value: 10, name: "已处理" },
							{ value: 7, name: "未处理" },
							{ value: 5, name: "待上传" },
						],
					},
				],
			});
		},
		handleTableChange(e) {
			this.gridDatas.pageData.pageNo = e.current;
			this.getAssetsPortList();
		},
		handleTableChange2(e) {
			this.gridDatas2.pageData.pageNo = e.current;
			this.getAssetsAppList();
		},
		handleTableChange3(e) {
			this.gridDatas3.pageData.pageNo = e.current;
			this.getBugList();
		},
		getFirmDetail(id, prs) {
			httpRequest.post("企业详情", { id }).then((res) => {
				this.firmDetail = res.data.firm;
				this.firmDetail.hasPRS = prs;
				//企业详情漏洞饼图
				detailBugChart = echarts.init(this.$refs.bugchart);
				this.vulns = res.data.statistics.vulns;
				this.assets = res.data.statistics.assets;
				this.InitdetailBugChart([this.vulns.highBugCount, this.vulns.mediumBugCount, this.vulns.lowBugCount]);
				// detailTongbaoChart = echarts.init(document.getElementById("tongbao-chart"));
				// this.InitdetailTongbaoChart();
				this.getAssetsPortList();
				this.getAssetsAppList();
				this.getBugList();
			});
		},
		getAssetsPortList() {
			httpRequest
				.post("企业详情-端口资产列表", {
					...this.gridDatas.pageData,
					firmId: this.firmId,
				})
				.then((res) => {
					this.gridDatas.data = res.data.list;
					this.gridDatas.pageData.current = this.gridDatas.pageData.pageNo = res.data.pageNo;
					this.gridDatas.pageData.total = res.data.pages * this.gridDatas.pageData.pageSize;
				});
		},
		getAssetsAppList() {
			httpRequest
				.post("企业详情-网站测绘列表", {
					...this.gridDatas2.pageData,
					firmId: this.firmId,
				})
				.then((res) => {
					this.gridDatas2.data = res.data.list;
					this.gridDatas2.pageData.current = this.gridDatas2.pageData.pageNo = res.data.pageNo;
					this.gridDatas2.pageData.total = res.data.pages * this.gridDatas2.pageData.pageSize;
				});
		},
		getBugList() {
			httpRequest
				.post("企业详情-漏洞列表", {
					...this.gridDatas3.pageData,
					firmId: this.firmId,
				})
				.then((res) => {
					this.gridDatas3.data = res.data.list;
					this.gridDatas3.pageData.current = this.gridDatas3.pageData.pageNo = res.data.pageNo;
					this.gridDatas3.pageData.total = res.data.pages * this.gridDatas3.pageData.pageSize;
				});
		},
		openDetail() {
			this.showDialog = true;
		},
		closeDialog() {
			this.showDialog = false;
			this.activeKey = "1";
			this.firmDetail = {};
			this.vulns = {};
			this.assets = {};
			this.gridDatas.data = [];
			this.gridDatas2.data = [];
			this.gridDatas3.data = [];
			this.gridDatas.pageData.pageNo = 1;
			this.gridDatas2.pageData.pageNo = 1;
			this.gridDatas3.pageData.pageNo = 1;
		},
	},
};
</script>
